<template>
  <ALayout style="height: 100vh">
    <ALayoutSider v-model:collapsed="collapsed" :trigger="null" collapsible>
      <div class="logo">
        <img src="./assets/system.png" />
        <div class="logo_t" v-show="!collapsed">Vue3开发测试系统</div>
      </div>
      <Menu
        v-model:openKeys="state.openKeys"
        v-model:selectedKeys="state.selectedKeys"
        mode="inline"
        theme="dark"
        :inline-collapsed="state.collapsed"
        :items="items"
        @click="handleMenuClick"
      ></Menu>
    </ALayoutSider>
    <ALayout style="display: flex; flex-direction: column">
      <ALayoutHeader class="header">
        <div class="header_c">
          <div class="title">
            <menu-unfold-outlined
              v-if="collapsed"
              class="trigger"
              @click="() => (collapsed = !collapsed)"
            />
            <menu-fold-outlined
              v-else
              class="trigger"
              @click="() => (collapsed = !collapsed)"
            />
            <div class="title_t">Vue3开发测试系统</div>
          </div>
          <img src="./assets/avatar.jpg" />
        </div>
      </ALayoutHeader>
      <ALayoutContent class="content">
        <RouterView />
      </ALayoutContent>
    </ALayout>
  </ALayout>
</template>

<script setup lang="ts">
import { ref, h } from "vue";
import { Layout, Menu } from "ant-design-vue";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  TableOutlined,
  GlobalOutlined,
  NodeIndexOutlined,
  SettingOutlined,
  ApiOutlined,
  FolderViewOutlined,
} from "@ant-design/icons-vue";
import { useRouter } from "vue-router";

const router = useRouter();
const ALayout = Layout;
const ALayoutSider = Layout.Sider;
const ALayoutHeader = Layout.Header;
const ALayoutContent = Layout.Content;
const collapsed = ref<boolean>(false);

const route = localStorage.getItem('route') as string;
const state = ref({
  collapsed: false,
  selectedKeys: [route],
  openKeys: [route],
});
router.push(route ? route : '/table');

const items = ref([
  {
    key: "/table",
    icon: () => h(TableOutlined),
    label: "表格/导出",
  },
  {
    key: "/map",
    icon: () => h(GlobalOutlined),
    label: "中国地图",
  },
  {
    key: "/track",
    icon: () => h(NodeIndexOutlined),
    label: "地图轨迹",
  },
  {
    key: "/father",
    icon: () => h(SettingOutlined),
    label: "组件传值",
  },
  {
    key: "/htmlToImage",
    icon: () => h(FolderViewOutlined),
    label: "html生成图片",
  },
  {
    key: "/customDropdown",
    icon: () => h(FolderViewOutlined),
    label: "自定义拖动下拉菜单",
  },
  {
    key: "/test",
    icon: () => h(ApiOutlined),
    label: "test",
  },
]);

const handleMenuClick = (e: any) => {
  if (e.key) {
    router.push(e.key);
    localStorage.setItem("route", e.key);
  }
};
</script>

<style lang="less" scoped>
.logo {
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  img{
    width: 24px;
    height: 24px;
  }
  .logo_t{
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    margin-left: 10px;
    white-space: nowrap;
  }
}
.header {
  padding: 0 20px;
  // background-color: #fff;
  .header_c {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      color: #fff;
      font-size: 18px;
      font-weight: 400;
      display: flex;
      align-items: center;
      .title_t{
        margin-left: 10px;
      }
    }
    img {
      width: 44px;
      height: 44px;
      border-radius: 50%;
    }
  }
}
.content {
  padding: 20px;
  flex: 1;
  overflow: auto;
}
</style>
